<template>
  <div class="haruyuki-scrollbar-60vh haruyuki-p-10">
    <div class="haruyuki-box-hazeBlue-shadow haruyuki-mb-20" v-for="(dataItem, index) in data" :key="index">
      <div class="aisle-template haruyuki-flex-space-between haruyuki-align-items-center haruyuki-ptb-10 haruyuki-bg-color-hazeblue">
        <div class="haruyuki-flex-center haruyuki-plr-20" @click="dataItem.isShow = !dataItem.isShow">
          <i :class="dataItem.isShow ? 'el-icon-caret-bottom' : 'el-icon-caret-right'"></i>
          <span class="haruyuki-size-16 haruyuki-ml-20">通道名称：</span>
          <span class="haruyuki-size-16 policy-ml-3 policy-mr-3">{{ dataItem.aisleName }}</span>
          <div class="haruyuki-ml-6" v-if="isTemplate">
            <el-select
              size="small"
              value-key="templatePolNo"
              v-model="dataItem.templateData"
              @change="templateChildChange($event, index)"
              @clear="templateChildClear(index)"
              placeholder="可选择一键分配模板"
              clearable
            >
              <el-option
                v-for="item in dataItem.template"
                :key="item.templatePolNo"
                :label="item.policyName"
                :value="item"
              >
              </el-option>
            </el-select>
          </div>
        </div>
      </div>
      <transition name="policy">
        <div v-show="dataItem.isShow">
          <table class="haruyuki-width-100">
            <colgroup>
              <col style="width: 200px; min-width: 200px;">
              <col>
            </colgroup>
            <tbody class="ant-table-tbody">
              <tr class="haruyuki-line-height-special haruyuki-plr-40" data-row-key="1">
                <td class="haruyuki-bg-color-hazeblue haruyuki-border-bottom-white policy-text-center">扫码结算底价</td>
                <td class="haruyuki-plr-20 haruyuki-border-bottom-hazeblue policy-text-center">
                  <el-input-number
                    class="haruyuki-width-50"
                    size="mini"
                    v-model="dataItem.aptRate"
                    :precision="4"
                    :step="0.0001"
                    :min="dataItem.aptRateMin"
                    :max="1"
                  ></el-input-number>
                  <span> %</span>
                </td>
                <td class="haruyuki-border-bottom-hazeblue haruyuki-border-right-hazeblue haruyuki-color-silverGray policy-text-center"></td>
              </tr>
              <tr class="haruyuki-line-height-special haruyuki-plr-40" data-row-key="2">
                <td class="haruyuki-bg-color-hazeblue haruyuki-border-bottom-white policy-text-center">扫码结算比例</td>
                <td class="haruyuki-plr-20 haruyuki-border-bottom-hazeblue policy-text-center">
                  <el-input-number
                    class="haruyuki-width-50"
                    size="mini"
                    v-model="dataItem.aptScale"
                    :precision="0"
                    :min="1"
                    :max="100"
                    @change="changeAptScale($event, index)"
                  ></el-input-number>
                  <span> %</span>
                </td>
                <td class="haruyuki-border-bottom-hazeblue haruyuki-border-right-hazeblue haruyuki-color-silverGray policy-text-center"></td>
              </tr>
              <tr class="haruyuki-line-height-special haruyuki-plr-40" data-row-key="0">
                <td class="haruyuki-bg-color-hazeblue haruyuki-border-bottom-white policy-text-center">扫码垫资费率</td>
                <td class="haruyuki-plr-20 haruyuki-border-bottom-hazeblue policy-text-center">
                  <el-input-number
                    class="haruyuki-width-50"
                    size="mini"
                    v-model="dataItem.codeAdvanceRate"
                    :precision="4"
                    :step="0.0001"
                    :min="0"
                    :max="1"
                  ></el-input-number>
                  <span> %</span>
                </td>
                <td class="haruyuki-border-bottom-hazeblue haruyuki-border-right-hazeblue haruyuki-color-silverGray policy-text-center"></td>
              </tr>
              <tr class="haruyuki-line-height-special haruyuki-plr-40" data-row-key="7">
                <td class="haruyuki-bg-color-hazeblue haruyuki-border-bottom-white policy-text-center">刷卡垫资费率</td>
                <td class="haruyuki-plr-20 haruyuki-border-bottom-hazeblue policy-text-center">
                  <el-input-number
                    class="haruyuki-width-50"
                    size="mini"
                    v-model="dataItem.posCodeAdvanceRate"
                    :precision="4"
                    :step="0.0001"
                    :min="0"
                    :max="1"
                  ></el-input-number>
                  <span> %</span>
                </td>
                <td class="haruyuki-border-bottom-hazeblue haruyuki-border-right-hazeblue haruyuki-color-silverGray policy-text-center"></td>
              </tr>
              <tr class="haruyuki-line-height-special haruyuki-plr-40" data-row-key="8">
                <td class="haruyuki-bg-color-hazeblue haruyuki-border-bottom-white policy-text-center">贷记卡刷卡结算底价</td>
                <td class="haruyuki-plr-20 haruyuki-border-bottom-hazeblue policy-text-center">
                  <el-input-number
                    class="haruyuki-width-50"
                    size="mini"
                    v-model="dataItem.creditRate"
                    :precision="4"
                    :step="0.0001"
                    :min="0"
                    :max="1"
                  ></el-input-number>
                  <span> %</span>
                </td>
                <td class="haruyuki-border-bottom-hazeblue haruyuki-border-right-hazeblue haruyuki-color-silverGray policy-text-center"></td>
              </tr>
              <tr class="haruyuki-line-height-special haruyuki-plr-40" data-row-key="9">
                <td class="haruyuki-bg-color-hazeblue haruyuki-border-bottom-white policy-text-center">借记卡刷卡结算底价</td>
                <td class="haruyuki-plr-20 haruyuki-border-bottom-hazeblue policy-text-center">
                  <el-input-number
                    class="haruyuki-width-50"
                    size="mini"
                    v-model="dataItem.debtRate"
                    :precision="4"
                    :step="0.0001"
                    :min="0"
                    :max="1"
                  ></el-input-number>
                  <span> %</span>
                </td>
                <td class="haruyuki-border-bottom-hazeblue haruyuki-border-right-hazeblue haruyuki-color-silverGray policy-text-center"></td>
              </tr>
              <tr class="haruyuki-line-height-special haruyuki-plr-40" data-row-key="10">
                <td class="haruyuki-bg-color-hazeblue haruyuki-border-bottom-white policy-text-center">借记卡刷卡封顶金额</td>
                <td class="haruyuki-plr-20 haruyuki-border-bottom-hazeblue policy-text-center">
                  <el-input-number
                    class="haruyuki-width-50"
                    size="mini"
                    v-model="dataItem.debtRateMax"
                    :precision="2"
                    :step="0.1"
                    :min="0"
                  ></el-input-number>
                  <span> ¥</span>
                </td>
                <td class="haruyuki-border-bottom-hazeblue haruyuki-border-right-hazeblue haruyuki-color-silverGray policy-text-center"></td>
              </tr>
              <tr class="haruyuki-line-height-special haruyuki-plr-40" data-row-key="11">
                <td class="haruyuki-bg-color-hazeblue haruyuki-border-bottom-hazeblue policy-text-center">挥卡小额结算底价</td>
                <td class="haruyuki-plr-20 haruyuki-border-bottom-hazeblue policy-text-center">
                  <el-input-number
                    class="haruyuki-width-50"
                    size="mini"
                    v-model="dataItem.waveRate"
                    :precision="4"
                    :step="0.0001"
                    :min="0"
                    :max="1"
                  ></el-input-number>
                  <span> %</span>
                </td>
                <td class="haruyuki-border-bottom-hazeblue haruyuki-border-right-hazeblue haruyuki-color-silverGray policy-text-center"></td>
              </tr>
              <tr class="haruyuki-line-height-special haruyuki-plr-40" data-row-key="12" v-if="dataItem.isShowVip == 1">
                <td class="haruyuki-bg-color-hazeblue haruyuki-border-bottom-hazeblue policy-text-center">银联费率</td>
                <td class="haruyuki-plr-20 haruyuki-border-bottom-hazeblue policy-text-center">
                  <el-input-number
                    class="haruyuki-width-50"
                    size="mini"
                    v-model="dataItem.unionpayRate"
                    :precision="4"
                    :step="0.0001"
                    :min="0"
                    :max="1"
                  ></el-input-number>
                  <span> %</span>
                </td>
                <td class="haruyuki-border-bottom-hazeblue haruyuki-border-right-hazeblue haruyuki-color-silverGray policy-text-center"></td>
              </tr>
              <tr class="haruyuki-line-height-special haruyuki-plr-40" data-row-key="13" v-if="dataItem.isShowVip == 1">
                <td class="haruyuki-bg-color-hazeblue haruyuki-border-bottom-hazeblue policy-text-center">尊享费率</td>
                <td class="haruyuki-plr-20 haruyuki-border-bottom-hazeblue policy-text-center">
                  <el-input-number
                    class="haruyuki-width-50"
                    size="mini"
                    v-model="dataItem.vipRate"
                    :precision="4"
                    :step="0.0001"
                    :min="0"
                    :max="1"
                  ></el-input-number>
                  <span> %</span>
                </td>
                <td class="haruyuki-border-bottom-hazeblue haruyuki-border-right-hazeblue haruyuki-color-silverGray policy-text-center"></td>
              </tr>
            </tbody>
          </table>
        </div>
      </transition>
    </div>
  </div>
</template>

<script>
import { getList, getDetail } from "@/api/rb-service/serviceTemplate/service_template";
import { getDetail as getEmpDetail } from "@/api/rb-service/emppolicy/emp_policy";
export default {
    props: {
        // data: { //通道政策 树形数据
        //     type: Array,
        //     default: () => {
        //         return []
        //     }
        // },
        oem: Object,
        aisleCode: {
            type: [Number, String],
            default: "",
        },
        identityType: {
            type: String,
            required: true,
        },
        isTemplate: {
            type: Boolean,
            default: true,
        },
        aisleCodeList: {
            type: Array,
            default: () => {
                return []
            }
        }
    },
    data() {
        return {
            data: [], //通道政策 树形数据
            aptTemplate: {
                aptRate: 0,
                aptScale: 0,
            },
            stateIndex: 1,
        };
    },
    watch: {},
    created() {
        this.getPolicy(this.identityType);
    },
    methods: {
        /* 政策详情 */
        async getPolicy() {
            await getEmpDetail(this.oem.code).then((res) => {
                if (res.data.code == "200") {
                    let datas = res.data.data.aisleList;
                    for (let i = 0; i < datas.length; i++) {
                        this.$set(datas[i], "isShow", true);
                    }
                    this.$nextTick(() => {
                        this.data = JSON.parse(JSON.stringify(datas));
                    });
                } else {
                    this.$message({
                        type: "error",
                        message: res.data.message,
                    });
                }
            });
        },
        /* 匹配政策通道编号 单模板查询 赋值 */
        async templatePolicy(data) {
            await getList("-1", "-1", { aisleCode: data.aisleCode }).then(
                (tempRes) => {
                this.$set(data, "template", tempRes.data.data.records);
                return data;
                }
            );
        },
        /* 通道政策模板 根据单通道选择模板单渲染 */
        async templateChildChange(e, index) {
            if (e.id) {
                let temp = this.data[index].template.find((item) => item.id === e.id);
                await getDetail(temp.id, this.data[index].aisleCode).then((res) => {
                let templateData = res.data.data;
                this.data[index].aptRate = templateData.aisleRateList[0].aptRate;
                this.data[index].aptScale = templateData.aisleRateList[0].aptScale;
                this.data[index].codeAdvanceRate = templateData.aisleRateList[0].codeAdvanceRate;
                this.data[index].templatePolNo = templateData.templatePolNo;
                });
            }
        },
        /* 通道政策模板 根据单通道选择模板单清空 */
        templateChildClear(index) {
            this.data[index].aptRate = 0;
            this.data[index].aptScale = 0;
            this.data[index].codeAdvanceRate = 0;
            this.data[index].templateData = {},
            this.data[index].templatePolNo = "";
        },
        /* 结算比例change 计算最低可设置成本费率 */
        changeAptScale(e, index) {
            // this.data[index].aptRate = e * this.data[index].aptRateMin;
            const decimals = e / 100;
            if (decimals * this.data[index].aptRate < this.data[index].aptRateMin) {
                this.$message({
                type: "error",
                message: "不能小于最低可设置成本费率",
                });
            }
        }
    },
}
</script>

<style lang="scss" scoped>
.aisle-template {
  width: 100%;
  font-weight: bold;
}

.policy-mr-3 {
  margin-right: 3px;
}

.policy-ml-3 {
  margin-left: 3px;
}

.policy-enter-active, .policy-leave-active {
	transition: all .1s ease-in-out 0s;
}
.policy-enter, .policy-leave-to {
	opacity: 0
}

.policy-text-center {
  text-align: center;
}
</style>